<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="css/header.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		mui.plusReady(function(){
			plus.navigator.setStatusBarStyle("light");
			plus.navigator.setStatusBarBackground("#2AC845");
		} );
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav title">
		<h1 id="title" class="mui-title title-color">觅聊</h1>
	</header>
	
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" tabIndex="0">
			<span class="mui-icon mui-icon mui-icon mui-icon-chatboxes"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" tabIndex="1">
			<span class="mui-icon mui-icon mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a class="mui-tab-item" tabIndex="2">
			<span class="mui-icon mui-icon mui-icon mui-icon-location"></span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" tabIndex="3">
			<span class="mui-icon mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	
	<script type="application/javascript" >
		var pages = [
			{
				pageId: "chatlist.html",
				pageUrl: "chatlist.html"
			},{
				pageId: "contact.html",
				pageUrl: "contact.html"
			},{
				pageId: "discover.html",
				pageUrl: "discover.html"
			},{
				pageId: "me.html",
				pageUrl: "me.html"
			}
		]
		
		var styleIndex = {
			top: "44px",
			bottom: "50px"
		}
		
		mui.plusReady(function(){
			
			mui.back = function (){
				return false;
			}
			// 对网络连接进行事件监听
			netChangeSwitch();
			var indexWebview =plus.webview.currentWebview();
			for(var i=0;i<pages.length;i++){
				var page = plus.webview.create(pages[i].pageUrl,pages[i].pageId,styleIndex);
				page.hide();
				indexWebview.append(page);
			}
			plus.webview.show(pages[0].pageId);
			
			//批量绑定tab事件显示不同的页面
			mui(".mui-bar-tab").on("tap","a",function(){
				var tabIndex = this.getAttribute("tabIndex");
				plus.webview.show(pages[tabIndex].pageId,"fade-in",200);
				
				for(var i=0;i<pages.length;i++){
					if(i!=tabIndex){
						plus.webview.hide(pages[i].pageId,"fade-out",200)
					}
				}
				
			})
			// 延时加载
			setTimeout("initData()", "1000");
		});
		
		// 监听网络状态更改
			function netChangeSwitch(){
				document.addEventListener("netchange", function(){
					// 网络状态获取和判断
					var connectionStatus = plus.networkinfo.getCurrentType();
					if (connectionStatus != 0 && connectionStatus != 1) {
						// 重新打开网络连接
						var title = document.getElementById("title");
						title.innerHTML = "<b>觅聊</b>";
					} else {
						// 关闭网络连接
						var title = document.getElementById("title");
						title.innerHTML = "<b>觅聊(网络连接异常)</b>";
					}
				});
			}
		
		// 预加载
				function initData() {
					var chatlist = plus.webview.getWebviewById("chatlist.html");
					mui.fire(chatlist, "refresh");
					var me = plus.webview.getWebviewById("me.html");
					mui.fire(me, "refresh");
				}
		
	</script>
	
</body>
</html>